<docs>
  ## 基本信息
</docs>
<template>
  <div class="wrap con-layout" ref="wrap">
    <div class="header">
      <span class="arrow" @click="back_btn"></span>
      <h3 class="title">{{baseTxt}}</h3>
    </div>
    <co-form :model="data" :rules="rules" ref="form" label="基本信息">
      <div class="tip" v-if="data.zjlx=='02'">为保障您的个人利益，如您持有社会保障卡请填写社会保障卡号。如不填写系统将为您自动派号，如需修改请到您常住地街镇公共就业服务机构办理。</div>
      <co-input label="姓名" v-model="data.xm" :disabled="true"></co-input>
      <co-select prop="xb" label="性别" v-model="data.xb" :disabled="csrqDisabled"
        :list="xbList"></co-select>
      <data-picker prop="csrq" label="出生日期" :disabled="csrqDisabled" v-model="data.csrq"></data-picker>
      <div class="weui-cell weui-cell_switch switch" v-if="data.zjlx=='02'">
        <div class="weui-cell__bd">有无社会保障卡号</div>
        <div class="weui-cell__ft">
          <input
            :disabled="bzkh"
            type="checkbox"
            class="weui-switch"
            :true-value="1"
            :false-value="0"
            v-model="sbkSwich"
          />
        </div>
      </div>
      <co-input label="社会保障卡号" prop="shbzkh" v-if="data.zjlx=='02' && sbkShow" v-model="data.shbzkh" :disabled="bzkh"></co-input>
      <co-input label="手机号" prop="sjhm" v-model="data.sjhm"></co-input>

      <co-select label="户口性质" class="tape" prop="hjxz" v-model="data.hjxz" :disabled="hjxzDis"
        :list="codeTable.syry_d_hjxz"></co-select>
      <select-json ref="hjd" v-if="cloak" label="户籍地址" prop="hjxzqh" :placeName.sync="data.hjxzqhmc" v-model="data.hjxzqh"></select-json>
      <co-input label="户籍地详细地址" v-show="data.hjxzqh.substring(0,2) != '11'" prop="hjdxxdz" v-model="data.hjdxxdz"></co-input>
      <div class="weui-cell weui-cell_switch switch" v-if="data.zjlx=='01'">
        <div class="weui-cell__bd">户籍地址与居住地址是否一致</div>
        <div class="weui-cell__ft">
          <input
            type="checkbox"
            class="weui-switch"
            :true-value="1"
            :false-value="0"
            v-model="data.czdyhjdsfyz"
          />
        </div>
      </div>
      <select-json ref="jzd" v-if="cloak" label="居住地址" prop="czdxzqh" v-show="jzdShow" :placeName.sync="data.czdxzqhmc" v-model="data.czdxzqh"></select-json>
      <co-input label="居住地详细地址" prop="czdxxdz" v-show="jzdShow" v-model="data.czdxxdz"></co-input>

      <co-select prop="whcd" label="文化程度" class="tape" v-model="data.whcd"
        :list="codeTable.cdg_educationallevel"></co-select>
      <data-picker prop="xdxlzsrq" label="毕业时间" v-show="whcdShow"
        v-model="data.xdxlzsrq"></data-picker>
    </co-form>
    <div class="next-step">
      <span class="btn btn-primary" @click="save">下一步</span>
    </div>
  </div>
</template>
<script>
import coForm from 'base/form/form';
import coInput from 'base/form/input';
import coSelect from 'base/form/select';
import { validator } from 'common/js/valid';
import dataPicker from "base/form/dataPicker3";
import selectJson from "base/form/selectJson";

export default {
  name: 'editDetail',
  components: { coForm, coInput, coSelect, selectJson,dataPicker },
  data() {
    return {
      cloak:false,
      csrqDisabled:false,//出生日期不可以选中
      baseTxt: "",//显示判断跳转页面
      hjxzDis: false,//户口性质disabled
      jzdShow: true,//居住地显隐
      whcdShow: true,//文化程度显隐
      sbkShow: false,//社会保障卡号显隐
      sbkSwich: 0,//有无社会保障卡号
      bzkh: false,//港澳台社会保障卡不能修改
      _dj:"",//跳转页面
      xbList:[{name:"男",id:"1"},{name:"女",id:"2"}],
      data: {
        xm:'', //姓名
        xb: '', //性别
        csrq: '', // 出生日期
        shbzkh: '', // 社会保障卡号
        sjhm:"", //手机号
        hjxz:"",//户口性质
        hjxzqh:"",//户籍地址代码
        hjxzqhmc:"",//户籍地址名称
        hjdxxdz: "", // 户籍详细地址
        czdyhjdsfyz:"", // 户籍地址与居住地址是否一致
        czdxzqh: "", // 居住地址代码
        czdxzqhmc:"", //居住地址名称
        czdxxdz:"", //居住地详细地址
        whcd:"", //文化程度
        xdxlzsrq:"", //毕业时间
        zjlx:""
      },
      rules: {
        sjhm: validator("11,normal,手机号,false"), // 手机号
        xb: validator("1,normal,性别,false"), // 性别
        csrq: validator("10,full,出生日期,false"), // 出生日期
        shbzkh: validator("32,less,社会保障卡号,true"), // 社会保障卡号
        hjxz: validator("2,least,户口性质,false"), // 户口性质
        hjxzqh: validator("128,less,户籍地址,false"), // 户籍地址
        hjdxxdz: validator('128,less,"户籍地详细地址",true'), // 户籍地详细地址
        czdxzqh: validator("128,less,居住地址,true"), // 居住地址
        czdxxdz: validator("128,less,居住地详细地址,true"), // 居住地详细地址
        whcd: validator("2,full,文化程度,false"), // 文化程度
        xdxlzsrq: validator("10,full,毕业时间,true"), // 毕业时间
      },
      codeTable: {
        syry_d_hjxz:[], // 户口性质
        cdg_educationallevel: [], // 文化程度
      },
    };
  },
  watch:{
    "data.hjxz":function (val) {
      this.hjxzDis = false;
      if(val == '50' && this.data.hjxzqh.substring(0, 2) == '11'){
        this.$alert('本市人员户口性质只能选择农业户口或非农业户口!');
        this.$nextTick(_=>{
          this.data.hjxz = '';
        })
      }
      if(this.data.zjlx == '02'){
        this.data.hjxz = '50';
        this.hjxzDis = true;
      }
    },
    "data.czdxzqh":{
      handler:function(val) {
        if (!val && this.$refs.jzd) {
          this.$refs.jzd.$el.childNodes[2].childNodes[0].innerText = '';
        }
      },
      deep: true,
      immediate: true
    },
    "data.hjxzqh": {
      handler:function(val) {
        if (val.substring(0, 2) == '11' && this.data.hjxz == '50') {
          this.data.hjxzqh = this.data.hjxzqhmc = '';
          if (this.$refs.hjd) {
            this.$refs.hjd.$el.childNodes[2].childNodes[0].innerText = '';
          }
          this.$alert('本市人员户口性质只能选择农业户口或非农业户口!');
        }
        if (val.substring(0, 2) != '11'){
          this.data.czdyhjdsfyz = 0;
          this.hjxzDis = false;
        }else{
          this.data.hjdxxdz = '';
          this.$loading = true;
          this.$http.get(`/jysydj/sfnc?xzqhdm=${val}`).then((res) => {
            const data = res.returnData;
            if(data.executeResult == '1' && data.sfnc == '1'){
              this.$confirm(`您是农业户籍劳动力，您也可到户籍地街镇公共就业服务机构办理农村转移就业登记，是否确认办理${this.baseTxt}？`, '提示')
              .then()
              .catch(() => {
                this.$router.push({path:"/index"});
              });
            }
          })
          .finally(() => {
            this.$loading = false;
          });
        }
      },
      deep: true,
      immediate: true
    },
    "sbkSwich":function(val){
      if(val === 1){
        this.sbkShow = true;
      }else{
        this.sbkShow = false;
        this.data.shbzkh = '';
      }
    },
    "data.czdyhjdsfyz":function (val){
      if(val == 1){ //选中
        // if( this.data.hjxzqh.substring(0, 2) != '11'){
        //   this.$alert('您不是本市户籍，不能选择户籍地与居住地一致!');
        //   this.data.czdyhjdsfyz = 0;
        // }else{
          this.jzdShow = false;
          this.data.czdxzqh = this.data.czdxzqhmc = this.data.czdxxdz = '';
        // }
      }else{
        this.jzdShow = true;
      }
    },
    'data.whcd': function (val) {
      if (val <= 30) {
        this.whcdShow = true;
      }else {
        this.whcdShow = false;
        this.data.xdxlzsrq = '';
      }
    },
  },
  methods: {
    back_btn(){
      this.$router.isBack = true;
      this.$router.push({path:"/index"});
    },
    save() {
      this.$refs.form.validate(() => {
        if (this.whcdShow && !this.data.xdxlzsrq) {
          this.$refs.form.errorMsg = '毕业时间不能为空!';
          return;
        }
        const hjxzqh = this.data.hjxzqh.substring(0, 2);//户籍地行政区划
        if (hjxzqh != '11' && this.data.hjdxxdz == '') {
          this.$refs.form.errorMsg = '户籍地详细地址不能为空!';
          return;
        }
        if (this.jzdShow && this.data.czdxzqh == '') {
          this.$refs.form.errorMsg = '居住地址不能为空!';
          return;
        }
        if (this.jzdShow && this.data.czdxzqh == '') {
          this.$refs.form.errorMsg = '居住地详细地址不能为空!';
          return;
        }
        const zjlx = this.data.zjlx;//证件类型
        if (zjlx == '02' && hjxzqh != '81' && hjxzqh != '82' && hjxzqh != '83') {
          this.$refs.form.errorMsg = '您选择的户籍地信息与实际信息不符!';
          return;
        }
        if (zjlx == "02") {
          if (this.sbkSwich == '1' && this.data.shbzkh) {
            var shbzkh = this.data.shbzkh.toUpperCase();
            if (shbzkh.length != 18) {
              this.$refs.form.errorMsg = '请输入正确的港澳台居住证号（社会保障卡号）!';
              this.data.shbzkh = '';
              return;
            }
            const _xb = shbzkh.substring(16, 17) % 2;//社会保障卡号判断性别  偶数女
            const xb = this.data.xb;//性别
            if (_xb == 0 && xb !== '2' || _xb != 0  && xb !== '1') {
              this.$refs.form.errorMsg = '您填写的性别与社会保障卡号的信息不符!';
              return;
            }
            const _csrq = shbzkh.substring(6, 14);//社会保障卡号判断出生日期
            const csrq = this.data.csrq.replace(/-/g, '');//出生日期
            if (_csrq !== csrq) {
              this.$refs.form.errorMsg = '您填写的出生日期与社会保障卡号的信息不符!';
              return;
            }
          }else if(this.sbkSwich == '1' && this.data.shbzkh == ''){
            this.$refs.form.errorMsg = '社会保障卡号不能为空!';
            return;
          }
        }
        this.POST_save();
      });
    },
    /* 获取代码表 */
    GET_codeTable() {
      const arrTableName = Object.keys(this.codeTable);
      this.$http.get('/jysydj/CodeOperation/getCodeData', {
        params: {
          dmbm: arrTableName.join()
        }
      }).then((res) => {
        const data = res.returnData;
        arrTableName.forEach(item => {
          this.codeTable[item] = data[item];
        });
      });
    },
    /* 保存信息修改 */
    POST_save() {
      this.$loading = true;
      this.$http
        .post("/jysydj/jbxxJy", this.data)
        .then(res => {
          const code = +res.returnData.executeResult;
          if (code === 1) {
            if(this._dj == 1){
              this.$router.push({ path: "/jyxxData" , query:{dj:this._dj}});
            }else{
              this.$router.push({ path: "/syxxData", query:{dj:this._dj} });
            }
          }

        })
        .finally(() => {
          this.$loading = false;
        });
    },
    /*  查询基本信息 */
    GET_getInfo() {
      this.$loading = true;
      this.$http.get('/jysydj/jbxxCx').then(res => {
        const resData = res.returnData;
        this.cloak = true;
        this.data = resData.jbxx;
        this.sbkSwich = this.data.shbzkh ? 1 : 0;
        //值为1，港澳台人员社会保障卡号和出生 日期和性别不能改。
        if (this.zjlx == '01') {
          this.csrqDisabled = true;
        }else if (this.data.zjlx == '02' && this.data.wwsfbl == '1'){
          this.bzkh = true;
          this.csrqDisabled = true;
        }
      }).finally(() => {
        this.$loading = false;
      });
    },
  },
  created() {
    // 获取代码表
    this.GET_codeTable();
    this.GET_getInfo();
    this._dj = this.$route.query.dj;
    this.baseTxt = this._dj == 1 ? '个人就业登记' : '失业登记';
    // 隐藏home按钮
    this.$store.commit('SET_VISIBLE_ALL', false);
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.wrap {
  background: $color-bg;
  overflow: auto;
  .tape{
    margin-top: 20px;
  }
  .weui-cell{
    background-color: #fff;
  }

  .next-step {
    margin: 42px 0 20px 0;
    padding: 0 34px;
    .btn{
      width: 100%;
      // width: 330px;
    }
    .btn-primary{
      // margin-left:10px;
    }
  }
}
.switch{
  font-size: 26px;
}
.tip{
  padding: 10px 30px;
  color: #ff9933;
  font-size: 26px;
}
</style>
